<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>ModalBox Functional Test</title>
	
	<script type="text/javascript" src="../../lib/prototype.js"></script>
	<script type="text/javascript" src="../../lib/scriptaculous.js"></script>
	
	<script type="text/javascript" src="../../modalbox.js"></script>
	<link rel="stylesheet" href="../../modalbox.css" type="text/css" />
	
	<style type="text/css" media="screen">
		#MB_loading {
			font-size: 13px;
		}
	</style>
	
</head>

<body>
	
	<h1>ModalBox Functional Test</h1>
	
	<ul>
		<li><a href="_ajax_js.html" title="Modalbox JS passing test" onclick="Modalbox.show(this.href, {title: this.title, width: 300, afterLoad: function(){ passValue('Current document') } }); return false;">Modalbox JS passing test</a></li>
		<li><a href="_ajax_form.html?v=7" title="Modalbox Prevent Scroll Test" onclick="Modalbox.show(this.href, {title: this.title, overlayClose: false}); return false;">Modalbox 'TAB'-key Handler &amp; Prevent Scroll Test</a></li>
		<li><a href="#" title="Modalbox without Ajax Test" onclick="Modalbox.show(Builder.build('<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'), {title: this.title, height: 150}); return false;">Modalbox without Ajax Builder Test</a></li>
		<li><a href="#" title="Modalbox without Ajax plain HTML test" onclick="Modalbox.show('<h1>HTML Header</h1><input type=\'button\' value=\'Resize me +100\' onclick=\'Modalbox.resize(0, 120)\' /><input type=\'button\' value=\'Resize me -100\' onclick=\'Modalbox.resize(0, -100)\' />', {title: this.title, height: 250 }); return false;">Modalbox without Ajax plain HTML test</a></li>
		<li><a href="#" title="Modalbox without Ajax by element ID test" onclick="Modalbox.show($('testContent'), {title: this.title, height: 250 }); return false;">Modalbox without Ajax by element ID test</a></li>
		<li><a href="#" title="Modalbox activate / deactivate test" onclick="Modalbox.show('<div style=\'padding: 10px; height:100%; background:#FFF; border: 1px solid #CCC\'><h1>Activate / Deactivate Test</h1><input type=\'button\' value=\'Deactivate\' onclick=\'Modalbox.deactivate()\' /><input type=\'button\' value=\'Activate\' onclick=\'Modalbox.activate()\' /><br /><br /></div>', {title: this.title }); return false;">Modalbox activate / deactivate test</a></li>
		<li><a href="#" title="Modalbox wrong parameter test" onclick="Modalbox.show(123, {title: this.title }); return false;">Modalbox wrong parameter test</a></li>
		<li><a href="_ajax_form.html" title="Modalbox without transitions" onclick="Modalbox.show(this.href, {title: this.title, transitions: false}); return false;">Modalbox without transitions</a></li>
		<li><a href="_ajax_form.html" title="Overlay opacity parameter test" onclick="Modalbox.show(this.href, {title: this.title, overlayOpacity: 0.1}); return false;">Overlay opacity parameter test</a></li>
		<li><a href="_ajax_method_get.php" title="GET/POST mixed methods test: Method GET" onclick="Modalbox.show(this.href, {title: this.title, params: {param: '1: via GET'} }); return false;">GET/POST mixed methods test</a></li>
		<li><a href="#" title="Modalbox without header test" onclick="Modalbox.show('<h1>No header modalbox</h1><input type=\'button\' value=\'Resize me (20,20)\' onclick=\'Modalbox.resize(20,20)\' /><input type=\'button\' value=\'Resize me -100\' onclick=\'Modalbox.resize(-20,-20)\' />', {title: false }); return false;">Modalbox without header test</a></li>
	</ul>
	
	<br />
	
	<select name="select1" id="select1" size="1">
		<optgroup label="Label Text">
			<option value="Value" selected="selected" label="Label Text">  </option>
		</optgroup>
	</select>
	
	<select name="select2" id="select2" size="2" style="visibility: collapse">
		<option value="111" label="Label Text 1">Label Text 1</option>
		<option value="222" label="Label Text 2">Label Text 2</option>
	</select>
	
	<div id="testContent" style="display: block">
		<h1>Test for hidden HTML block</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<form action="#" method="get">
			<select name="select3" id="select3" size="1">
				<option value="Value" selected="selected" label="Label Text">  </option>
			</select>
			<br />
			<input type="text" name="text_field" value="This is the test field" id="text_field" />
			<input type="button" name="button_el" value="Test IDs are changed" id="button_el" onclick="$('text_field').value = 'Can access proper element by ID';" />
		</form>
	</div>
	
	<div style="border:1px solid; height:1000px">
		Content
	</div>
	
	<p><a href="#" title="Modalbox without Ajax plain HTML test" onclick="Modalbox.show('<h1>HTML Header</h1><input type=\'button\' value=\'Resize me +100\' onclick=\'Modalbox.resize(0, 120)\' /><input type=\'button\' value=\'Resize me -100\' onclick=\'Modalbox.resize(0, -100)\' />', {title: this.title, height: 250 }); return false;">Modalbox window scrolling test</a></p>
	
	
	<script type="text/javascript" charset="utf-8">
		function passValue (str) {
			alert("Passed value: " + str);
		}
	</script>
</body>
</html>
